<template>
  <div>
    <div style="position: absolute; width: 100%; top: 0px; bottom: 0px;" id="DataBottomLeft"></div>
  </div>

</template>
<script>
  import Q from './lib/qunee-es.js';
  import request from '@/utils/request';
  import './lib/icon-di.js';
  export default {
    mounted() {
      var graph = new Q.Graph('DataBottomLeft');

      /**
       * 创建节点
       */
      function createNode(name, from) {
        var node = graph.createNode(name);
        if (from) {
          graph.createEdge(from, node);
        }
        return node;
      }

      /**
       * 初始化数据
       */
      function requestQunee() {
        request({
          url: '/bigScreen/tmOrganization',
          method: 'post'
        }).then((response) => {
          console.log(response);
          createRootNode(response)
        })
      }




      /**
       * 递归qunee 根结点
       */
      function createRootNode(json) {
        //camp数据处理
        //console.log(json);
        var campArray = json["collection"];
        // var cn = campArray[0];
        // campArray = [];
        // campArray.push(cn);
        // console.log(campArray)
        //campArray.pop(0);
        var campArraySize = campArray.length;
        while (campArraySize > 0){
          var campName = campArray[campArraySize-1];
          console.log(campName);
          var camp = createNode(campName);
          imageSelector(camp,3,campName);
          camp.parentChildrenDirection =  Q.Consts.DIRECTION_BOTTOM;
          camp.layoutType = Q.Consts.LAYOUT_TYPE_EVEN;

          //camp下第一层根结点的数据处理
          var campRootArray = json[campName];
          var campRootArraySize = campRootArray.length;
          while (campRootArraySize > 0){
            var index = campRootArraySize-1;
            var name = campRootArray[index].orgName+'\n'+'人员数量:'+campRootArray[index].personnelNum;
            var campRoot = createNode(name,camp);

            showPersonnelNum(campRoot);

            var nodeType = campRootArray[index].orgType;
            imageSelector(campRoot,nodeType,campName);
            campRoot.parentChildrenDirection = Q.Consts.DIRECTION_BOTTOM;
            campRoot.layoutType = Q.Consts.LAYOUT_TYPE_EVEN;
            //camp下第二层节点的数据处理
            var parentNodeInfo = campRootArray[index];
            var parentNode = campRoot;
            createNodeRecursion(parentNodeInfo,parentNode,json,campName);
            campRootArraySize--;
          }

          // if (campArray[campArraySize-1] == 'CN'){
          //   Unfold(Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL);
          // }else{
          //   Unfold(Q.Consts.LAYOUT_TYPE_EVEN);
          // }
          campArraySize--;
        }
        Unfold(Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL);
        console.log(graph.graphModel);
      }

      /**
       * 递归qunee子节点
       */
      function createNodeRecursion(parentNodeInfo,parentNode,json,campName) {
        var key = parentNodeInfo.orgId;
        var childrenRootArray = json[key];
        var childrenRootArraySize = childrenRootArray.length;
        while (childrenRootArraySize > 0){
          var index = childrenRootArraySize-1;
          var name  = childrenRootArray[index].orgName+'\n'+'人员数量:'+childrenRootArray[index].personnelNum;
          var childrenRoot = createNode(name,parentNode);
          showPersonnelNum(childrenRoot);
          var nodeType = childrenRootArray[index].orgType;
          imageSelector(childrenRoot,nodeType,campName);
          childrenRoot.parentChildrenDirection = Q.Consts.DIRECTION_BOTTOM;
          childrenRoot.layoutType = Q.Consts.LAYOUT_TYPE_EVEN;
          var childrenRootInfo = childrenRootArray[index];
          createNodeRecursion(childrenRootInfo,childrenRoot,json,campName);
          childrenRootArraySize--;
        }
      }

      function getDirection(index,direction) {
        if(index%3 == 0){
          direction = Q.Consts.DIRECTION_BOTTOM_RIGHT;
        }
        if(index%3 == 1){
          direction = Q.Consts.DIRECTION_BOTTOM_LEFT;
        }
        if(index%3 == 2){
          direction = Q.Consts.DIRECTION_BOTTOM;
        }

      }

      /***
       * 节点图片选择器
       * 区分敌我双份组织机构展示
       */
      function imageSelector(node,nodeType,campName) {
        var nodeImage = campName == 'CN'?'Q-node':'/image/node_icon.png';
        var exchanger = campName == 'CN'?'Q-exchanger2':'/image/exchanger_icon.png';
        var server = campName == 'CN'?'Q-server':'/image/server_icon.png';
        if (nodeType == 1){
          node.image= nodeImage ;
        }
        if (nodeType == 2){
          node.image= exchanger;
        }
        if (nodeType == 3){
          node.image = server;
        }
      }

      /**
       * 展示对应机构下的人员数
       */
      function showPersonnelNum(nodeWithLabel) {
        nodeWithLabel.setStyle(Q.Styles.LABEL_OFFSET_Y, -10);
        nodeWithLabel.setStyle(Q.Styles.LABEL_COLOR, '#2898E0');
        nodeWithLabel.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP);
        nodeWithLabel.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.CENTER_BOTTOM);
        nodeWithLabel.setStyle(Q.Styles.LABEL_BORDER, 1);
        nodeWithLabel.setStyle(Q.Styles.LABEL_POINTER, true);
        nodeWithLabel.setStyle(Q.Styles.LABEL_PADDING, new Q.Insets(2, 5));
        nodeWithLabel.setStyle(Q.Styles.LABEL_BACKGROUND_GRADIENT, Q.Gradient.LINEAR_GRADIENT_VERTICAL);
      }




      requestQunee();

      /**
       * 展开节点
       */
      function Unfold(param) {
        var layouter = new Q.TreeLayouter(graph);
        layouter.layoutType = param;
        layouter.doLayout({
          callback: function () {
            graph.zoomToOverview();
          }
        });
      }

      /**
       *双击修改信息
       */
      graph.ondblclick = function (evt) {
        var node = graph.getElementByMouseEvent(evt);
        if (node) {
          var newName = prompt("New Name:");
          if (newName) {
            console.log(node.name);
            node.name = newName;
            console.log(node.name)
          }
        }
      }
    }

  }


</script>
